<template>
  <div class="wrapper">
    <div class="control-box" :style="{ height: height }">
      <div class="control-hand">
        <el-tooltip
          class="item"
          effect="dark"
          content="摄像头向上转动"
          placement="top"
        >
          <i
            :class="hasNoPermision"
            class="hand-top"
            @click="changeCameraDirection(21)"
          ></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="摄像头向左转动"
          placement="top"
        >
          <i
            :class="hasNoPermision"
            class="hand-left"
            @click="changeCameraDirection(23)"
          ></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="摄像头向右转动"
          placement="top"
        >
          <i
            :class="hasNoPermision"
            class="hand-right"
            @click="changeCameraDirection(24)"
          ></i>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="摄像头向下转动"
          placement="top"
        >
          <i
            :class="hasNoPermision"
            class="hand-bottom"
            @click="changeCameraDirection(22)"
          ></i>
        </el-tooltip>
        <i :class="hasNoPermision" class="hand-center"></i>
      </div>
    </div>

    <div class="control-menu">
      <div class="menu-item" :style="{ width: menuPercent }">
        <i
          :class="hasNoPermision"
          class="el-icon-remove icon-set"
          @click="changeCameraDirection(12)"
        ></i>
        <span class="icon-des">变倍</span>
        <i
          :class="hasNoPermision"
          class="el-icon-circle-plus icon-set"
          @click="changeCameraDirection(11)"
        ></i>
      </div>

      <div class="menu-item" :style="{ width: menuPercent }">
        <i
          :class="hasNoPermision"
          class="el-icon-remove icon-set"
          @click="changeCameraDirection(14)"
        ></i>
        <span class="icon-des">聚焦</span>
        <i
          :class="hasNoPermision"
          class="el-icon-circle-plus icon-set"
          @click="changeCameraDirection(13)"
        ></i>
      </div>

      <div class="menu-item" :style="{ width: menuPercent }">
        <i
          :class="hasNoPermision"
          class="el-icon-remove icon-set"
          @click="changeCameraDirection(16)"
        ></i>
        <span class="icon-des">光圈</span>
        <i
          :class="hasNoPermision"
          class="el-icon-circle-plus icon-set"
          @click="changeCameraDirection(15)"
        ></i>
      </div>
    </div>

    <!-- 预置位 -->
    <div class="imFlex1 imCenterX" style="width: 100%; margin-top: 18px">
      <el-form v-model="presetForm" :inline="true" size="mini">
        <el-form-item label="">
          <el-select
            filterable
            v-model="presetForm.preset"
            clearable
            size="mini"
            style="width: 140px"
            placeholder="请选择预置位"
            @change="letsPreset"
          >
            <el-option
              v-for="dict in presetList"
              :key="dict.presetId"
              :label="dict.presetName"
              :value="dict.presetId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item>
          <el-button
            size="mini"
            type="primary"
            :disabled="!cameraNotFit()"
            @click="resetPreset()"
            >恢复</el-button
          >
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { cameraHandle } from "../../../components/map/api";
import { checkRole, checkIsPower } from "@/utils/permission.js";
import EventBus from "@/utils/eventBus";
import util from "@/libs/util";
export default {
  components: {},
  props: {
    presetList: {
      type: Array,
    },
    height: {
      type: String,
      default: "280px",
    },
    scale: {
      // 操作手柄的大小
      type: Number,
      default: 1,
    },
    // 按钮的分布--50%，一行两项，100%--一行一项
    menuPercent: {
      type: String,
      default: "33.33%",
    },
    // 摄像机类型 1-枪机 2--球机 传过来的是 ptzCtrl 0 可控制 1 不可控制
    cameraType: {
      type: [String, Number],
      default: "",
    },
    cameraNum: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      presetForm: {
        preset: "",
      },
      handleState: false,
      isPlaying: false,
    };
  },

  computed: {
    // handStyle(){
    //     return {transform: `scale(${this.scale})`}
    // }

    // !checkIsPower() ||
    hasNoPermision() {
      return {
        grayStyle:
          !util.isNotEmpty(this.cameraType) ||
          this.cameraType != 0 ||
          !this.isPlaying,
      }; //  1-枪机 2-球机
    },
  },

  created() {
    EventBus.$on("changeStatus", this.changeStatus);
  },

  mounted() {},

  methods: {
    /**
     * 预置位恢复
     */
    resetPreset() {
      this.handleCamera(39, 0);
    },

    /**
     * 相机是否可控
     */
    cameraNotFit() {
      return (
        util.isNotEmpty(this.cameraType) &&
        this.cameraType == 0 &&
        this.isPlaying &&
        this.presetList != null &&
        this.presetList.length > 0
      );
    },

    /**
     * 调用预置位
     */
    letsPreset(val) {
      this.handleCamera(39, val);
    },

    /** 播放状态 */
    changeStatus(status) {
      this.isPlaying = status;
    },

    /**
     * 云台控制
     */
    handleCamera(type, preset) {
      if (this.handleState) return; // 避免连续多次点击
      this.handleState = true;
      let action = {
        23: "向左移动",
        24: "向右移动",
        21: "向上移动",
        22: "向下移动",
        12: "减小变倍",
        11: "增加变倍",
        14: "减小聚焦",
        13: "增加聚焦",
        16: "减小光圈",
        15: "增大光圈",
        39: "调用预置位",
      };

      // this.$ajax.get('/home/PTZControl',
      //     {
      //         params: {
      //             camId: this.cameraNum,
      //             cmdType: type,
      //             msgType: 3,
      //             speed: 5
      //         }
      //     }).then(res =>{
      //         this.handleState = false
      //         this.$message(`当前选中相机正在${action[type]}`)
      //     }).catch(err => {
      //         this.handleState = false
      //         this.$message('操作失败')
      // })

      cameraHandle({
        camId: this.cameraNum,
        cmdType: type,
        msgType: 3,
        speed: type == 39 ? preset : 5,
      })
        .then((res) => {
          this.handleState = false;
          this.$modal.msgSuccess(`当前选中相机正在${action[type]}`);
        })
        .catch((err) => {
          this.handleState = false;
          this.$modal.msgError("操作失败");
        });
    },

    changeCameraDirection(type) {
      // 权限控制


      if (!this.cameraNum) {
        this.$modal.msgError("当前无选中摄像机！");
        return;
      }

      if (!util.isNotEmpty(this.cameraType) || this.cameraType != 0) {
        // 只有球形摄像机才可以使用 0 可控 非0 不可控制
        this.$modal.msgError("该摄像机不能使用云控平台");
        return;
      }

      if (!this.isPlaying) {
        this.$modal.msgError("当前摄像机播放异常");
        return;
      }
      this.handleCamera(type, null);
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .control-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .control-hand {
      position: relative;
      width: 190px;
      height: 190px;
      .grayStyle {
        filter: grayscale(100%);
      }

      .hand-top {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        width: 100px;
        height: 40px;
        background: url(~@/assets/image/map-img/top.png) center no-repeat;
        cursor: pointer;
      }
      .hand-left {
        position: absolute;
        left: 0;
        transform: translateY(-50%);
        top: 50%;
        height: 100px;
        width: 40px;
        background: url(~@/assets/image/map-img/left.png) center no-repeat;
        cursor: pointer;
      }
      .hand-right {
        position: absolute;
        right: 0;
        transform: translateY(-50%);
        top: 50%;
        height: 100px;
        width: 40px;
        background: url(~@/assets/image/map-img/right.png) center no-repeat;
        cursor: pointer;
      }
      .hand-bottom {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 100px;
        height: 40px;
        background: url(~@/assets/image/map-img/bottom.png) center no-repeat;
        cursor: pointer;
      }
      .hand-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background: url(~@/assets/image/map-img/circle-reset.png) center
          no-repeat;
      }
    }
  }
  .control-menu {
    display: flex;
    flex-wrap: wrap;
    .menu-item {
      font-size: 13px;
      text-align: center;
      .icon-set {
        color: #1f77f3;
        vertical-align: middle;
        cursor: pointer;
      }
      .grayStyle {
        color: #797979;
      }
      .icon-des {
        margin-right: 4px;
        margin-left: 4px;
      }
    }
  }
}
</style>
